<template>
	<div>
		<div class="news_lie">
			<div class="pb_hader">
				<p>
					<span class="lt_span">{{personneltname}}</span>
					<a class="rg_a"><span>首页</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>案例展示</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span class="rg_sp">{{personneltname}}</span></a>
				</p>
			</div>
			<div class="about">
				<ul>
					<li v-for="(item,index) in personnellist" :key="index">
						<div class="rv_left">
							<span class="rv_sp1">{{item.personnel_name}}</span>
							<span class="rv_sp2">{{item.personnel_yw}}</span>
						</div>
						<div class="rv_right">
							<p class="rv_haders">任职要求</p>
							<p class="rv_plans">{{item.personnel_nr}}</p>
						</div>
						<p class="rv_psd"><a href="#">&gt; 投递简历</a></p>
					</li>
				</ul>
				<el-pagination 
				  background
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="querytInfo.pagenum"
				  layout="prev, pager, next, jumper"
				  :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				personneltname:'人才招聘',
				personnellist:[{
					personnel_name:'销售经理',
					personnel_yw:'sales manager',
					personnel_nr:'因本企业生产需要，现急招企业办公质检人员二名，工作地在重庆市杨家坪前进支路，在商圈附近，交通方便，离轻轨近，上下班方便。熟悉生产企业办公流程，月休四天，试用期工资2000元，试用期二个月，试用期满后工资在2000-2600元，并办理相关社保，品性端正，善于沟通，工作努力尽职,认真负责...'
				},{
					personnel_name:'办公质检员',
					personnel_yw:'Office of inspector',
					personnel_nr:'因本企业生产需要，现急招企业办公质检人员二名，工作地在重庆市杨家坪前进支路，在商圈附近，交通方便，离轻轨近，上下班方便。熟悉生产企业办公流程，月休四天，试用期工资2000元，试用期二个月，试用期满后工资在2000-2600元，并办理相关社保，品性端正，善于沟通，工作努力尽职,认真负责...'
				},{
					personnel_name:'仓库管理员',
					personnel_yw:'GODOWN keeper',
					personnel_nr:'因本企业生产需要，现急招企业办公质检人员二名，工作地在重庆市杨家坪前进支路，在商圈附近，交通方便，离轻轨近，上下班方便。熟悉生产企业办公流程，月休四天，试用期工资2000元，试用期二个月，试用期满后工资在2000-2600元，并办理相关社保，品性端正，善于沟通，工作努力尽职,认真负责...'
				},{
					personnel_name:'行政助理',
					personnel_yw:'Assistant',
					personnel_nr:'因本企业生产需要，现急招企业办公质检人员二名，工作地在重庆市杨家坪前进支路，在商圈附近，交通方便，离轻轨近，上下班方便。熟悉生产企业办公流程，月休四天，试用期工资2000元，试用期二个月，试用期满后工资在2000-2600元，并办理相关社保，品性端正，善于沟通，工作努力尽职,认真负责...'
				}],
				querytInfo: {
					query: '',
					// 当前页数
					pagenum: 1,
					// 总条数
					pagesize: 2
				},
				total: 8,
			}
		},
		mounted() {
			this.personneltid = this.$route.params.id
		},
		methods: {
			// 监听psgesize 改变
			handleSizeChange(newsize) {
				// console.log(newsize);
				this.querytInfo.pagesize = newsize
			},
			// 监听 页码值 改变
			handleCurrentChange(newpage) {
				// console.log(newpage);
				this.querytInfo.pagenum = newpage
			},
		},
		// 监听路由变化，操作数据更新
		watch: {
			$route(to, from) {
				this.personneltid = this.$route.params.id
				// this.$HTTP.get('', {
				// 	params: ''
				// })
				// .then((res) => {
				// 	// this.newslist = res
				// 	// this.total = res.total
				// })
				// .catch((error) => {
				// 	console.log(error)
				// })
			}
		}
	}
</script>

<style scoped>
	.news_lie {
		width: 100%;
		height: auto;
		border: 1px solid #EEEEEE;
		float: left;
		box-sizing: border-box;
	}

	.pb_hader {
		width: 100%;
		height: auto;
		padding: 0 20px;
		box-sizing: border-box;
		border-bottom: none;
		background: #fff;
	}

	.pb_hader p {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e5e5e5;
		line-height: 50px;
	}

	.pb_hader p .lt_span {
		border-left: 4px solid #0069b1;
		font-size: 18px;
		line-height: 30px;
		margin-top: 10px;
		padding: 0 12px;
		color: #1f2f3a;
	}

	.pb_hader p .rg_a {
		display: inline-block;
		float: right;
		font-size: 14px;
		color: #b3b2b2;
		margin-left: 5px;
	}

	.pb_hader p .rg_a .rg_sp {
		color: #7c7c7c;
	}

	.pb_center {
		width: 100%;
		height: auto;
	}
	
	.about{
		width: 100%;
		height: auto;
		padding: 0 20px 20px 20px;
		box-sizing: border-box;
		float: left;
		background: #fff;
	}
	
	.about ul li{
		width: 100%;
		height: auto;
		padding: 28px 0;
		border-bottom: 1px solid #dddddd;
		float: left;
		cursor: pointer;
	}
	.about ul li:hover .rv_left{
		border: 2px solid #0069b1;
	}
	.about ul li:hover .rv_haders{
		color: #0069b1;
	}
	.rv_left{
		width:125px;
		height: 125px;
		box-sizing: border-box;
		border:2px solid #eeeeee;
		border-radius:100%;
		float: left;
	}
	.rv_left span{
		display: inline-block;
		width: 100%;
		color: #666464;
		text-align: center;
	}
	
	.rv_left span.rv_sp1{
		font-size: 20px;
		line-height: 22px;
		margin-top: 35px;
	}
	.rv_left span.rv_sp2{
		font-size: 12px;
		line-height: 20px;
	}
	.rv_right{
		width:calc(100% - 165px);
		height: auto;
		float: left;
		margin-left: 40px;
	}
	.rv_right p.rv_haders{
		font-size: 18px;
		line-height: 30px;
		color: #4c4948;
		margin-top:15px;
	}
	
	.rv_right p.rv_plans{
		font-size: 14px;
		line-height: 20px;
		color: #9b9b9c;
	}
	.rv_psd{
		width: 100%;
		float: left;
		height: auto;
		text-align: right;
	}
	.rv_psd a{
		font-size: 14px;
		line-height: 20px;
		color: #9b9b9c;
	}
	
	.el-pagination{
		width: 100%;
		margin-top:20px;
		text-align: center;
		float: left;
	}
</style>
